<template>
  <view>
    <view v-if="current == 0">
      <uni-nav-bar dark left-icon="left" shadow background-color="#497bff" status-bar title="点名详情"
        @clickLeft="back1()" />
      <view class="uni-list-cell">
        <view>
          <view class="topTitleV unitV">{{ formatDate(message.claDate) }}</view>
          <view class="list-paixu">
            <view class="topTitleV">{{message.startTime}} 一 {{message.endTime}} </view>
          </view>

        </view>




      </view>
      <u-modal v-model="show" @confirm="confirm" @cancel="cancel" :show-cancel-button='true'
        content='请假学生需慎重,一经修改将直接点名'>
      </u-modal>
      <view class="task">

        <view class="invitation">
          <view class="item">
            <text class="texts">签到详情({{add()}}/{{add()}})</text>
          </view>
          <scroll-view scroll-y style="height: 850rpx;">
            <view v-for="(item,index) in studentList" class="item" :key="index">
              <view class="icon">
                <image :src="CanvasPattern(index)">
              </view>
              <view class="cent">
                <text>{{item.studentName}}</text>
                <text>剩余{{item.balanceHour}}课时</text>
              </view>
              <view @click="showmodal(item)" class="complete"
                :style="{
								backgroundColor: item.attendStatus === '1'  ? '#007aff' : '#ffffff',color:item.attendStatus  === '1'  ? '#ffffff' : '#000000'}">
                <text>到课</text>
              </view>
              <view @click="showmodal(item)" class="complete"
                :style="{
								backgroundColor: item.attendStatus === '2'  ? '#007aff' : '#ffffff',color:item.attendStatus === '2'  ? '#ffffff' : '#000000' }">
                <text>请假</text>
              </view>
            </view>

          </scroll-view>
        </view>









      </view>

    </view>

  </view>
</template>

<script>
  import moment from 'moment';
  moment.locale('zh-cn');
  export default {
    onBackPress() {

      if (this.current == 0) {
          var pages = getCurrentPages()
          var pre = pages[pages.length - 2] //上一个页面
          pre.$vm.datechange({
            fulldate: this.message.claDate,

          })
          return false

    
      }
      this.current = 0
      return true

    },

    data() {
      return {
        show: false,
        message: '',
        studentList: '',
        current: 0,
        item: ''
      }
    },






    methods: {
      CanvasPattern(index) {
        return require('@/static/common/img/people' + index % 8 + '.png')

      },
      add() {

        return this.message.atClassCnt + this.message.leaveCnt
      },

      formatDate(dateStr) {
        const da = moment(dateStr);
        const formatted = da.format('YYYY年MM月DD日');
        const dayOfWeek = da.format('dddd');
        return `${formatted} ${dayOfWeek}`;
      },
      classCourse(item) {
        item.attendStatus = '1'
      },
      leave(item) {
        item.attendStatus = '2'
      },
      back1() {
        uni.navigateBack({
          delta: 1
        });
      },
      confirm() {

        if (this.item.attendStatus == '1') {
          this.item.attendStatus = '2'
          this.item.payHour = this.message.payTotalHour
        } else {
          this.item.attendStatus = '1'
          this.item.payHour = this.message.payTotalHour
        }
        this.$u.api.updateAttend(
          this.item
        ).then(res => {
          if (res.code == 200) {
            console.log(res)
          } else {
            console.log(res.msg)
          }
        })
        this.item = ''
      },
      cancel() {
        this.item = ''
      },
      showmodal(item) {
        this.item = item
        this.show = true
      },
    },


    onLoad(options) {
      // 解析传递的对象、
      if (options.data !== null) {
        this.message = options.data;

      }

      this.$u.api.mobileUpdateClassList({
        claId: this.message.claId,
        courseTimeId: this.message.courseTimeId,
      }).then(res => {
        if (res.code == 200) {
          this.studentList = res.data
        }




      })







    },


  }
</script>

<style lang="scss">
  .background {
    background-color: #f7f7f7;
    width: 100vw;
    // min-height: calc(100vh - 100rpx);
    /* #ifdef H5 */
    min-height: 70vh;
    /* #endif */
    /* #ifndef H5 */
    min-height: 100vh;
    /* #endif */
    padding-top: 1rpx;

    .filter {
      background: #fff;
      padding: 30rpx;
      width: 100vw;
      overflow-x: scroll;

      .filter-item {
        min-width: 200rpx;
        height: 80rpx;
        background: #F4F6F9;
        border-radius: 20px;
        background: #F4F6F9;
        background-size: 39rpx 30rpx;
        margin-right: 20rpx;

        font-size: 32rpx;
        color: #7F8BB4;
        font-weight: 400;

        image {
          width: 33rpx;
        }
      }
    }
  }

  page {

    background-color: #F3F4F6;
  }

  .texts {
    flex: 1;
    display: flex;
    flex-direction: column;
    font-size: 24rpx;
    color: #999999;
    line-height: 34rpx;
    margin: 6rpx 0 22rpx 0;

  }

  .uni-list-cell {
    background-image: url('/static/common/img/read.png');
    width: 100%;
    height: 200rpx;
    flex-direction: column;
    background-size: 120% 280%;
    /* 或者使用 cover、100% 100% 等值 */
    background-position: center;
    padding: 6rpx 30rpx;
  }

  .inner {
    position: relative;
    top: 5.8%;
  }

  .list-paixu {

    display: flex;
  }

  .topTitleV {
    height: 40rpx;
    line-height: 40rpx;
    color: #2a2a2a;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 500;
    font-size: 50rpx;

  }

  .topTitleVv {
    color: #737373;
    margin-left: 30rpx;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    display: inline-block;
    padding: 5rpx 10rpx;
    border: 1rpx solid #a5a5a5;
    white-space: nowrap;

  }

  .unitV {
    color: #737373;
    font-size: 15px;
    margin-top: 0px;
    font-family: PingFangSC-Regular, PingFang SC;

  }

  .cellView {
    margin-top: 28rpx;
    margin-left: -17rpx;
    height: 40rpx;
    text-align: center;
    padding: 5rpx 25rpx !important;
    font-size: 12px;

    color: #ff0000;
    background: #ffe1e1;
  }

  .cellViews {
    margin-top: 50rpx;
    margin-left: -17rpx;
    height: 40rpx;
    text-align: center;
    padding: 5rpx 20rpx !important;
    font-size: 12px;

    color: #ff0000;
    background: #ffe1e1;
  }

  .task {
    position: fixed;
    width: 100%;
    height: 1000rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    margin-top: 24rpx;
    padding: 40rpx 30rpx 0 20rpx;
    display: flex;
    flex-direction: column;
    border-radius: 80rpx;

    .title {
      font-size: 32rpx;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333333;
      line-height: 44rpx;
    }

    .text {
      font-size: 24rpx;
      color: #999999;
      line-height: 34rpx;
      margin: 6rpx 0 22rpx 0;
    }

    .list {
      display: flex;
      justify-content: space-between;
      margin-bottom: 74rpx;

      >view {
        width: 92rpx;
        height: 116rpx;
        background: linear-gradient(90deg, #A47EFF 0%, #8F64FB 100%);
        border-radius: 6rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        >image {
          width: 58rpx;
          height: 56rpx;
        }

        >text {
          font-size: 20rpx;
          color: #FFFFFF;
          line-height: 28rpx;
          margin-top: 6rpx;
        }
      }
    }

    .invitation {
      .item {
        display: flex;
        align-items: center;
        margin-bottom: 25rpx;

        .icon {
          width: 84rpx;
          height: 84rpx;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 14rpx;

          >image {
            width: 84rpx;
            height: 84rpx;
          }
        }

        .cent {
          flex: 1;
          display: flex;
          flex-direction: column;

          >text:first-child {
            font-size: 28rpx;
            color: #333333;
            line-height: 40rpx;
          }

          >text:last-child {
            font-size: 24rpx;
            color: #999999;
            line-height: 34rpx;
          }
        }

        .complete {
          width: 100rpx;
          height: 50rpx;
          border-radius: 2rpx;
          justify-content: center;
          align-items: center;
          text-align: center;

          border: 0.5rpx solid #e6e6e6;


          >text {
            font-size: 24rpx;
            font-weight: 600;
            line-height: 50rpx;
          }
        }

        .completes {
          width: 100rpx;
          height: 50rpx;
          border-radius: 2rpx;
          justify-content: center;
          align-items: center;
          text-align: center;
          border: 0.5rpx solid #e6e6e6;
          color: #ffffff;
          line-height: 30upx;
          font-size: 20upx;
          top: 15upx;
          border-radius: 15upx;
          background-color: #FF6633;

          >text {
            font-size: 21rpx;
            line-height: 50rpx;
          }
        }
      }
    }
  }
</style>